<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下载更新</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      padding: 20px;
      text-align: center;
    }
    .progress-container {
      margin-top: 20px;
    }
    progress {
      width: 100%;
      height: 20px;
    }
    .status {
      margin-top: 10px;
      font-size: 14px;
    }
    .error {
      color: red;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h2>正在下载更新...</h2>
  <div class="progress-container">
    <progress id="progress-bar" value="0" max="100"></progress>
    <div id="status" class="status">准备下载...</div>
  </div>
  <div id="error" class="error" style="display: none;"></div>

  <script>
    const { ipcRenderer } = require('electron')

    const progressBar = document.getElementById('progress-bar')
    const statusEl = document.getElementById('status')
    const errorEl = document.getElementById('error')

    ipcRenderer.on('download-progress', (event, progress) => {
      const percent = Math.round(progress.percent)
      progressBar.value = percent
      statusEl.textContent = `已下载 ${percent}% (${Math.round(progress.bytesPerSecond / 1024)} KB/s)`
    })

    ipcRenderer.on('download-error', (event, error) => {
      errorEl.style.display = 'block'
      errorEl.textContent = `下载错误: ${error.message || '未知错误'}`
      statusEl.textContent = '下载失败'
    })
  </script>
</body>
</html>
